.wizard {

	.clearfix;
	padding-bottom: 20px;
	border-bottom: 1px solid lighten(@grey, 10%);
	margin-bottom: 20px;

	ul {
		list-style: none outside none;
		padding: 0;
		margin: 0;

		li {
			float: left;
			margin: 0;
			padding: 0 20px 0 30px;
			height: 46px;
			line-height: 46px;
			position: relative;
			color: @grey;
			font-size: 16px;
			cursor: default;

			.chevron {
				display: none;
			}
			
			&:after {
				position: absolute;
				content: '';
				z-index: -1;
				width: 100%;
				height: 4px;
				background: lighten(@grey, 10%);
				left: 0px;
				top: 50%;
				margin-top: 0px;
				.border-radius(2px);
			}
			
			&:before {
				position: absolute;
				content: '';
				z-index: -1;
				width: 100%;
				height: 8px;
				background: lighten(@grey, 16%);
				left: -2px;
				top: 50%;
				padding: 0px 2px;
				margin-top: -2px;
				.border-radius(4px);
				.box-sizing(content-box);
			}

			&.complete {
				color: @green;

				&:hover {
					cursor: pointer;
				}
				
				&:after {
					background: @green;
				}
				
				.badge {
					border: 1px solid @green;
					background: @green;
					color: white;
				}
			}
			&.active {
				color: @blue;
				
				.badge {
					border: 1px solid @mainColor;
					background: white;
					color: @darkGrey;
				}
				
			}
			.badge {
				position: relative;
				margin-right: 8px;
				.border-radius(50em);
				font-size: 12px;
				padding: 10px;
				width: 14px;
				text-align: center;
				border: 1px solid lighten(@grey, 10%);
				background: white;
				color: @darkGrey;
				
				
				&:before {
					position: absolute;
					content:'';
					z-index: -1;
					width: 100%;
					height: 100%;
					padding: 6px;
					background: lighten(@grey, 16%);
					top: -6px;
					left: -6px;
					.border-radius(50em);
					.box-sizing(content-box);
				}
			}
		}

		/* set z-index on steps for chevron overlap */
		li:nth-child(1) {
			border-radius: 4px 0 0 4px;
			padding-left: 20px;
			z-index: 10;
		}
		li:nth-child(2) {
			z-index: 9;
		}
		li:nth-child(3) {
			z-index: 8;
		}
		li:nth-child(4) {
			z-index: 7;
		}
		li:nth-child(5) {
			z-index: 6;
		}
		li:nth-child(6) {
			z-index: 5;
		}
		li:nth-child(7) {
			z-index: 4;
		}
		li:nth-child(8) {
			z-index: 3;
		}
		li:nth-child(9) {
			z-index: 2;
		}
		li:nth-child(10) {
			z-index: 1;
		}
	}

	.actions {
		line-height: 44px;
		float: right;
		padding-right: 15px;
		vertical-align: middle;

		a {
			line-height: 45px;
			font-size: 12px;
			margin-right: 8px;
		}

		.btn-prev {
			i {
				margin-right: 5px;
			}
		}

		.btn-next {
			i {
				margin-left: 5px;
			}
		}
	}
}

.step-content {
	.step-pane {
		display: none;
	}

	.active {
		display: block;
	}
}